<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-search :searchHandle="searchHandleAdd" />
    <r-table
      :isSelection="false"
      :isIndex="false"
      indexLabel="ID"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="getData()"
    >
    </r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="100px"
      dialogWidth="600px"
      :isHandle="true"
    />

    <usage_record
      :res="usage_record_data"
      v-if="usage_record_data.show"
      v-on:usage_record_call="usage_record_call"
    ></usage_record>

    <uploadFile
      type="ic"
      :res="{ type: 1 }"
      v-if="uploadFile_fag"
      v-on:uploadFile_call="uploadFile_call"
    ></uploadFile>

    <el-dialog title="Recharge提示" :visible.sync="centerDialogVisible">
      <ul class="ul_list">
        <li v-for="item in settingTopup_list" :key="item.id">
          <div class="dialog_content_item">
            Package:
            <span>{{ item.mealName }}</span>
          </div>
          <div class="dialog_content_item">
            Recharge Amount:
            <span>{{ item.inMoney }}元</span>
          </div>
          <div class="dialog_content_item" v-show="item.outMoney">
            Gift Amount:
            <span>{{ item.outMoney }}元</span>
          </div>
          <div class="btnDiv">
            <el-button
              class="el-button"
              type="primary"
              @click.native="recharge(item)"
              >Recharge
            </el-button>
          </div>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>
import usage_record from "./cus/usage_record";
import uploadFile from "../cus/uploadFile";
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      radio: "",
      userId: "",

      settingTopup_list: [],
      centerDialogVisible: false,
      uploadFile_fag: false,
      usage_record_data: {
        show: false,
        cardNumber: ""
      },
      searchData: {
        cardNumber: "",
        userPhone: "",
        status: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "cardNumber",
          placeholder: "IC卡编号",
          width: 150
        },
        {
          type: "input",
          prop: "userPhone",
          placeholder: "Phone码",
          width: 150
        },
        {
          type: "select",
          prop: "status",
          placeholder: "Status",
          width: 150,
          options: [
            {
              label: "正常",
              value: "1"
            },
            {
              label: "Forbidden",
              value: "2"
            }
          ]
        }
      ],
      searchHandleAdd: [
        {
          label: "Add",
          type: "success",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormVisible()
        },
        {
          label: "ImportData",
          type: "success",
          handle: e => {
            this.uploadFile_fag = true;
          }
        },
        // {
        //   label: "ExportData",
        //   icon: 'el-icon-download',
        //   type: "success",
        //   loading: false,
        //   handle: (that) => this.handleDownload(),
        // },
        {
          label: "ImportTemplateDownload",
          type: "success",
          handle: async e => {
            // const res = await this.apis.importTemplate2();
            // console.log("res---", res);
            // location.href = process.env.VUE_APP_URL + res.msg;
          }
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.getData()
        }
        // {
        //     label: 'Reset',
        //     icon: 'el-icon-refresh-right',
        //     handle: e => this.searchFromReset()
        // },
      ],
      tableData: [],
      tableCols: [
        {
          label: "序号",
          prop: "id"
        },
        {
          label: "IC卡编号",
          prop: "cardNumber"
        },
        {
          label: "是否绑定User",
          prop: "unbind"
        },
        {
          label: "绑定人信息",
          prop: "userName"
        },
        {
          label: "UserPhone",
          prop: "phone"
        },
        {
          label: "IC卡绑定Phone",
          prop: "userPhone"
        },
        {
          label: "绑定时间",
          prop: "updatedTime"
        },
        {
          label: "Creation Time",
          prop: "createdTime",
          width: 160,
          formatter: e =>
            e.createdTime &&
            this.getDeta(+new Date(e.createdTime.replace(/T/g, " ")))
        },
        {
          label: "Status",
          prop: "state",
          formatter: e =>
            e.state == 0
              ? "Nonactivated"
              : e.state == 1
              ? "Activated"
              : e.state == 2
              ? "已挂失"
              : e.state == 3
              ? "已注销"
              : e.state == 4
              ? "已补卡"
              : ""
        },
        {
          label: "Operations",
          type: "button",
          width: 350,

          btnList: [
            {
              label: "Recharge",
              type: "success",
              handle: async row => {
                const res = await this.apis.settingTopup_list({});
                this.settingTopup_list = res.rows;
                this.userId = row.userId;
                this.centerDialogVisible = true;
              }
            },
            {
              label: "Delete",
              type: "danger",
              handle: row => this.del(row)
            },

            {
              label: "EmployRecord",
              type: "primary",
              handle: row => {
                this.usage_record_data.cardNumber = row.cardNumber;
                this.usage_record_data.show = true;
              }
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },

      formData: {
        cardNumber: ""
      },
      formCols: [
        { type: "input", label: "IC卡号", width: 350, prop: "cardNumber" }
      ],
      formRules: {
        cardNumber: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "确认",
          type: "primary",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormSubmit()
        },
        {
          label: "Cancel",
          icon: "el-icon-circle-close",
          handle: e => this.elFormVisible()
        }
      ]
    };
  },
  components: {
    usage_record,
    uploadFile
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    async recharge(item) {
      this.$confirm(`确定要${item.mealName}吗?`, "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      })
        .then(async () => {
          const res = await this.apis.updateUserWallet({
            userId: this.userId,
            money: String(item.inMoney),
            mealId: item.id
          });
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.centerDialogVisible = false;
          }
        })
        .catch(() => {});
    },
    usage_record_call() {
      this.usage_record_data.show = false;
    },
    async getData() {
      const res = await this.apis.ic_list({
        cardNumber: this.searchData.cardNumber,
        userPhone: this.searchData.userPhone,
        status: this.searchData.status,
        pageNum: this.tablePage.page,
        pageSize: this.tablePage.limit
      });

      const list = res.rows || [];

      this.tableData = list;
      this.tablePage.total = res.total;
    },
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await this.apis.ic_save({
            cardNumber: this.formData.cardNumber
          });

          this.$message({
            message: "OperationsSuccess！",
            type: "success"
          });
          this.elFormVisible();
          this.getData();
        }
      });
    },

    del(row) {
      this.$confirm("确定要Delete吗?", "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      })
        .then(async () => {
          var res = await this.apis.ic_del({
            id: row.id
          });
          this.$message({
            type: "success",
            message: "DeleteSuccess!"
          });
          this.getData();
        })
        .catch(() => {});
    },

    uploadFile_call(fag) {
      this.uploadFile_fag = false;
      if (fag) {
        this.getData();
      }
    }
  }
};
</script>

<style scoped lang="scss">
.dialog_content_item {
  margin-bottom: 5px;
  font-size: 18px;
  display: flex;
  align-content: center;
}
.dialog_content_item > span {
  color: #3e8ef7;
  font-size: 20px;
}
.ul_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ul_list li {
  width: 30%;
  padding: 10px;
  border: #3e8ef7 1px dashed;
  text-align: center;
  margin-bottom: 20px;
}
.ul_list li div:last-child {
  margin-top: 10px;
}
.ul_list li > div {
  width: 100%;
  display: inline-block;
}

.ul_list li > div .el-button {
  margin-top: 10px;
}
</style>
